<script setup>
import { ref, reactive, toRefs, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import Table from '@/components/Table/index.vue';
import ComponentColumn from '@/components/ComponentColumn/index.vue';
import { addBomMatchList } from '@/server/api/biz.js';
import { ElMessage } from 'element-plus';
import Pagination from '@/components/Pagination/index.vue';
import { size } from 'lodash';
import { getQueryPageList } from '@/server/api/biz.js';
const total = ref(20);
const props = defineProps({
  bomData: {
    type: Array,
    default: [],
  },
  fileId: {
    type: String,
  },
  // 是否展示操作按钮
  showOperation: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(['getAlldata', 'getStatisticalData', 'getNotPostedTotal', 'getTableData']);
const columns = computed(() => {
  const tableColumns = [
    {
      label: t('om.BOMModel'),
      prop: 'manufacturerPn',
      width: '152px',
    },
    {
      label: t('om.BOMBit'),
      prop: 'designator',
      width: '120px',
    },
    {
      label: t('om.Branding'),
      prop: 'manufacturer',
      width: '100px',
    },
    {
      label: t('om.Componentparameters'),
      prop: 'description',
    },
  ];
  if (props.showOperation) {
    tableColumns.push({
      label: t('smt.Operational'),
      fixed: 'right',
      type: 'btn',
      width: '100px',
    });
  }
  return tableColumns;
});

let pagesNum = ref(1);

/**
 * 加入贴片
 * @param {*} index
 * @param {*} row
 */
const addPatch = (index, row) => {
  addBomMatchList({ bomMatchListId: row.id }).then((res) => {
    console.log(res);
    if (res.code == 200) {
      emit('getAlldata');
      getNotPostedTableData(pagesNum.value, 10);
      emit('getStatisticalData');
      ElMessage.success(res.msg);
    }
  });
};

const updateData = (pages, size) => {
  pagesNum.value = pages;
  getNotPostedTableData(pages, size);
  // emit('getNotPostedTableData', pages, size);
};

let notPostedTableData = ref({});
/**
 * 获取不贴表格数据
 * @param {*} current
 * @param {*} pageSize
 */
const getNotPostedTableData = async (current = 1, pageSize = 10) => {
  const obj = {
    bomFileId: props.fileId,
    current: current,
    pageSize: pageSize,
    patchStatus: 2,
    similarity: '',
    status: '',
  };
  const res = await getQueryPageList(obj);
  if (res.code == 200) {
    notPostedTableData.value = res.data;
    emit('getNotPostedTotal', res.data.total);
    emit('getTableData', notPostedTableData.value);
  } else {
    ElMessage.error(res.msg);
  }
};
defineExpose({
  getNotPostedTableData,
});
onMounted(() => {
  getNotPostedTableData();
});
</script>
<template>
  <div class="table-wrap">
    <h2>{{ $t('om.UnpostedComponents') }}</h2>
    <Table
      v-loading="loading"
      :data="notPostedTableData.records"
      :columns="columns"
      serial
      :serialOptions="{ pageNum: notPostedTableData.current, pageSize: notPostedTableData.size }"
    >
      <!-- <template #imgSlot="{ scope }"> -->
      <!-- 推荐元件 -->
      <!-- <component-column :row="scope.row" /> -->
      <!-- </template> -->
      <template #btnSlot="{ scope }">
        <el-button size="small" type="warning" @click="addPatch(scope.$index, scope.row)">{{
          $t('mall.add_to_smt')
        }}</el-button>
      </template>
    </Table>
    <div style="display: flex; flex-direction: row-reverse">
      <Pagination
        class="m-b-10"
        v-show="Number(notPostedTableData.total) > 0"
        :total="Number(notPostedTableData.total)"
        v-model:page="notPostedTableData.pages"
        v-model:limit="notPostedTableData.size"
        @pagination="updateData"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.table-wrap {
  padding-top: 24px;
  h2 {
    color: var(--mall-text-color-primary);
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 12px;
  }
}
</style>
